<template>
  <j-modal
    :title='title'
    :width='1100'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button @click='handleOk' type='primary' v-if='!disableSubmit'>确认</a-button>
    </template>

    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row style='width: 100%;'>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='细类名称'>
              <a-input :disabled='disableSubmit' placeholder='请输入细类名称'
                       v-decorator="['categoriesDetailName', { rules: [{ required: true, message: '请输入细类名称' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='ERP会计科目编码'>
              <a-input :disabled='disableSubmit' placeholder='请输入ERP会计科目编码'
                       v-decorator="['erpSubjectCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='ERP会计科目名称'>
              <a-input :disabled='disableSubmit' placeholder='请输入ERP会计科目名称'
                       v-decorator="['erpSubjectName']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='上账方式'>
              <a-select mode='multiple' :disabled='disableSubmit'
                        v-decorator="['accountMethodCode',{rules: [{ required: true, message: '请选择上账方式' }]}]"
                        placeholder='请选择上账方式'>
                <!--<a-select-option value='1'>-->
                  <!--奖励池-->
                <!--</a-select-option>-->
                <a-select-option value='2'>
                  费用池
                </a-select-option>
                <!--<a-select-option value="3">-->
                <!--SAP贷款-->
                <!--</a-select-option>-->
                <a-select-option value='4'>
                  现金
                </a-select-option>
              </a-select>
              <!--              <a-input :disabled="disableSubmit" type="textarea" placeholder="请输入详细内容"-->
              <!--                       v-decorator="['accountMethodCode', validatorRules.remarks]" />-->
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='费用类型'>
              <cn-dict-select-tag
                :disabled='disableSubmit'
                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"
                :triggerChange='true'
                dictCode='fee_type'
                v-decorator="['categoriesDetailType',{rules: [{ required: true, message: '请选择费用类型' }]}]"
                placeholder='请选择'
              />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='费比'>
              <a-input-number placeholder="请输入百分数" style='width:100%' :max='100' :min='0' v-decorator="['costRatio',{rules: [{ required: true, message: '请输入费比' }]}]"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='是否允许超出'>
              <a-select v-decorator="['isGoBeyond',{rules:[{required:true,message:'请选择'}]}]" placeholder="是否允许超出">
                <a-select-option value="1">
                  允许
                </a-select-option>
                  <a-select-option value="0">
                  不允许
                  </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'

              label='费用归类'>
              <cn-dict-select-tag
                :disabled='disableSubmit'
                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"
                :triggerChange='true'
                dictCode='cost_type'
                v-decorator="['costType',{rules: [{ required: true, message: '请选择费用归类' }]}]"
                placeholder='请选择'
              />
            </a-form-item>
          </a-col>
          <a-col :md='16' :sm='24'>
            <a-form-item
              :labelCol='{
              xs: { span: 24 },
              sm: { span: 4 }
              }'
              :wrapperCol='{
              xs: { span: 24 },
              sm: { span: 14 }
              }'

              label='详细内容'>
              <a-input :disabled='disableSubmit' type='textarea' :maxLength='500' placeholder='请输入详细内容'
                       v-decorator="['remarks']" />
            </a-form-item>
          </a-col>



          <a-divider style="font-weight: 600;margin-top: 20px;" orientation="left">活动执行要求</a-divider>
          <div style='padding:0 24px;'>

            <a-col :md='8' :sm='24'>
              <a-form-item
                :labelCol='{
              xs: { span: 24 },
              sm: { span: 5 }
              }'
                :wrapperCol='{
              xs: { span: 24 },
              sm: { span: 16 }
              }'
                label='是否执行'>
              <span style='display: flex;align-items: center'>
                  <a-radio-group :disabled='disableSubmit' v-decorator="['isPushSfa',{initialValue:1}]"
                                 :style="{ marginRight: '24px' }" @change='handelIsPushSfa'>
                    <a-radio-button :value='1'>
                      是
                    </a-radio-button>
                    <a-radio-button :value='0'>
                      否
                    </a-radio-button>
                  </a-radio-group>
                <span v-if='IsPushSfa&&!disableSubmit'>
                 <j-select-active-column :inputs='false' selectButtonText='选择执行要求' :queryParams="{exampleType: '1'}"
                                         searchIcon='' name='选择执行要求' @select='activeSelect' />
                </span>
                <!--                  <a-button type="primary" style='margin-left: 20px' @click="handleAddStore">选择执行要求</a-button>-->
              </span>
              </a-form-item>
            </a-col>
            <span v-if='IsPushSfa'>
              <a-col :md='8' :sm='24'>
                <a-form-item
                  :labelCol='{
                xs: { span: 24 },
                sm: { span: 8 }
                }'
                  :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 16 }
                }'
                  label='活动执行名称'>
                  <a-input :disabled='disableSubmit' placeholder='请输入活动执行名称'
                           v-decorator="['actExecName',{rules: [{ required: true, message: '请输入活动执行名称' }]}]" />
                </a-form-item>
              </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='{
                xs: { span: 24 },
                sm: { span: 8 }
                }'
              :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 16 }
                }'

              label='间隔时间(小时)'>
              <a-input-number :disabled='disableSubmit'
                              :min='0'
                              placeholder=''
                              v-decorator="['intervalTime',{rules: [{ required: true, message: '' }]}]"
                              style='width:100%' />
            </a-form-item>
          </a-col>
              <a-col :md='22' :sm='24' :offset='1'>
              <a-table
                ref='table'
                size='middle'
                bordered
                rowKey='id'
                :scroll='{x:1500}'
                :columns='columns'
                :dataSource='taskItemsList'
                :pagination='false'
                :loading='loading'
              >
                <template slot='miniNum' slot-scope='t,record,index'>
                  <a-input-number v-model='t' placeholder='最低上传数量'
                                  :disabled='disableSubmit' :min='0'
                                  @change="e=>tableColChange(e,'miniNum',record,index)" style='width: 100%' />

                </template>
                <template slot='isRequire' slot-scope='t,record,index'>
                  <a-select
                    :disabled='disableSubmit'
                    @change="e=>tableColChange(e,'isRequire',record,index)"
                    placeholder='是否必做'
                    v-model='t'
                  >
                    <a-select-option :value='1'>
                      是
                    </a-select-option>
                    <a-select-option :value='0'>
                      否
                    </a-select-option>
                  </a-select>
                </template>
                <template slot='isFromAlbum' slot-scope='t,record,index'>
                  <a-select
                    @change="e=>tableColChange(e,'isFromAlbum',record,index)"
                    placeholder='是否允许相册上传'
                    v-model='t'
                    :disabled='disableSubmit'
                  >
                    <a-select-option :value='1'>
                      是
                    </a-select-option>
                    <a-select-option :value='0'>
                      否
                    </a-select-option>
                  </a-select>
                </template>
                <template slot='aiRuleCode' slot-scope='t,record,index'>
                  <a-select
                    @change="e=>tableColChange(e,'aiRuleCode',record,index)"
                    placeholder='请选择AI识别规则'
                    v-model='t'
                    :disabled='record.isPushAi == 0'
                  >
                    <a-select-option v-for='(item,index) in ruleList' :key='index' :value='item.aiRuleCode'>
                      {{ item.aiRuleName}}
                    </a-select-option>
                  </a-select>
                </template>

                <template slot='isPushAi' slot-scope='t,record,index'>
                  <a-select
                    :disabled='disableSubmit'
                    @change="e=>tableColChange(e,'isPushAi',record,index)"
                    placeholder='是否推送AI'
                    v-model='t'
                  >
                    <a-select-option :value='1'>
                      是
                    </a-select-option>
                    <a-select-option :value='0'>
                      否
                    </a-select-option>
                  </a-select>
                </template>

                <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                  <a @click.stop='tabDeleta(index)'>删除</a>
                </span>
              </a-table>
            </a-col>
            </span>
          </div>


          <a-divider style="font-weight: 600;margin-top: 20px;" orientation="left">核销要求</a-divider>
          <div style='padding:0 24px;'>
            <a-col :md='24' :sm='24'>
              <a-form-item
                :labelCol='{
                xs: { span: 24 },
                sm: { span: 2 }
                }'
                :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 16 }
                }'
                label='是否核销'>
                <span style='display: flex;align-items: center'>
                    <a-radio-group :disabled='disableSubmit' v-decorator="['isAudit',{initialValue:1}]"
                                   :style="{ marginRight: '24px' }" @change='handelIsAudit'>
                      <a-radio-button :value='1'>
                        是
                      </a-radio-button>
                      <a-radio-button :value='0'>
                        否
                      </a-radio-button>
                    </a-radio-group>
                  <span v-if='IsAudit&&!disableSubmit'>
                    <j-select-active-column :inputs='false' selectButtonText='选择核销要求' :queryParams="{exampleType: '2'}"
                                            searchIcon='' name='选择核销要求' @select='activeSelect1' />
                  </span>
                </span>
              </a-form-item>
            </a-col>
            <span v-if='IsAudit'>
<!--            <a-col :md="8" :sm="24">-->
              <!--              <a-form-item-->
              <!--                :labelCol='{-->
              <!--                xs: { span: 24 },-->
              <!--                sm: { span: 8 }-->
              <!--                }'-->
              <!--                :wrapperCol='{-->
              <!--                xs: { span: 24 },-->
              <!--                sm: { span: 14 }-->
              <!--                }'-->
              <!--                label="是否自动核销">-->
              <!--                <a-select :disabled="disableSubmit" v-decorator="['isAutoAudit',{rules: [{ required: true, message: '是否自动核销' }],initialValue:0}]"  placeholder="是否自动核销">-->
              <!--                  <a-select-option :value="1">-->
              <!--                    是-->
              <!--                  </a-select-option>-->
              <!--                  <a-select-option :value="0">-->
              <!--                    否-->
              <!--                  </a-select-option>-->
              <!--                </a-select>-->
              <!--              </a-form-item>-->
              <!--            </a-col>-->
            <a-col :md='8' :sm='24'>
              <a-form-item
                :labelCol='{
                xs: { span: 24 },
                sm: { span: 9 }
                }'
                :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 14 }
                }'
                label='超额核销比例（%）'>
                <a-input-number :min='0' :disabled='disableSubmit' placeholder='超额核销比例'
                                v-decorator="['extraAuditRatio']" style='width: 100%;' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item
                :labelCol='{
                xs: { span: 24 },
                sm: { span: 9 }
                }'
                :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 14 }
                }'
                label='核销有效期（月）'>
                <a-input-number :min='0' :disabled='disableSubmit' placeholder='核销有效期（月）'
                                v-decorator="['auditValidity',{rules: [{ required: true, message: '请输入有效期' },{pattern:/^[1-9]\d*$/,message:'请输入大于0的整数'}]}]"
                                style='width: 100%;' />
              </a-form-item>
            </a-col>
            <a-col :offset='1' :md='18' :sm='24'>

            <a-table
              ref='table'
              size='middle'
              bordered
              rowKey='id'
              :columns='columns1'
              :dataSource='taskItemsList1'
              :pagination='false'
              :loading='loading'
            >
              <template slot='isRequire' slot-scope='t,record,index'>
                <a-select
                  :disabled='disableSubmit'
                  @change="e=>tableColChange1(e,'isRequire',record,index)"
                  placeholder='是否必传'
                  v-model='t'
                >
                  <a-select-option :value='1'>
                    是
                  </a-select-option>
                  <a-select-option :value='0'>
                    否
                  </a-select-option>
                </a-select>
              </template>
              <span slot='action' v-if='!disableSubmit' slot-scope='text, record,index'>
                  <a @click.stop='tabDeleta1(index)'>删除</a>
                </span>
            </a-table>

            </a-col>
            </span>
          </div>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
// import proChose from '@comp/cn-components/ProChose'
import { httpAction, postAction } from '@api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
import JSelectCategories from '@comp/cn-select-popup/JSelectCategories'
import JSelectSubjects from '@comp/cn-select-popup/JSelectSubjects'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import Area from '@comp/utils/Area'
import { PageListMixin } from '@/mixins/PageListMixin'
import { ajaxGetDictItems, getDictItemsFromCache } from '@api/api'
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from 'v-viewer'
import lodash from 'lodash'
import JSelectActiveColumn from '../../../../components/cn-select-popup/JSelectActiveColumn'

export default {
  name: 'taskReleaseModal',
  mixins: [PageListMixin],
  components: { JMultiSelectTag, JSelectCategories, JSelectSubjects, JSelectActiveColumn },

  data() {
    return {
      title: '新增',
      IsPushSfa: true,
      IsAudit: true,
      taskItemsList: [],
      columns: [
        {
          title: '示例编码',
          align: 'center',
          dataIndex: 'exampleCode'
        },
        {
          title: '示例名称',
          align: 'center',
          dataIndex: 'exampleName'
        },
        {
          title: '适用角色',
          align: 'center',
          dataIndex: 'roleNames'
        },
        {
          title: '最低上传数量',
          align: 'center',
          dataIndex: 'miniNum',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'miniNum' }
        },
        {
          title: '是否必做',
          align: 'center',
          dataIndex: 'isRequire',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'isRequire' }
        },
        {
          title: '是否允许相册上传',
          align: 'center',
          dataIndex: 'isFromAlbum',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'isFromAlbum' }
        },
        {
          title: '是否推送AI',
          align: 'center',
          dataIndex: 'isPushAi',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'isPushAi' }
        },
        {
          title: 'AI识别规则',
          align: 'center',
          dataIndex: 'aiRuleCode',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'aiRuleCode' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }

      ],
      columns1: [
        {
          title: '示例编码',
          align: 'center',
          dataIndex: 'exampleCode'
        },
        {
          title: '示例名称',
          align: 'center',
          dataIndex: 'exampleName'
        },
        // {
        //   title: '适用角色',
        //   align: 'center',
        //   dataIndex: 'roleNames',
        // },
        {
          title: '是否必传',
          align: 'center',
          dataIndex: 'isRequire',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'isRequire' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 80,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }

      ],
      taskItemsList1: [],
      disableSubmit: false,
      modal: {},
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        add: window._CONFIG['domianTpmURL'] + '/act/categories/saveOrUpdate',
        // airule: window._CONFIG['domianTpmURL'] + '/tpmAiRule/findPageList'

      },
      ruleList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.airuleget()
  },
  methods: {
    airuleget() {
      postAction(this.url.airule).then(res => {
        if (res.success) {
          this.ruleList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    tableColChange(e, key, r, index) {
      if (e instanceof Object) {
        e = e.target.value
      }
      this.taskItemsList[index][key] = e
    },
    tableColChange1(e, key, r, index) {
      if (e instanceof Object) {
        e = e.target.value
      }
      this.taskItemsList1[index][key] = e
    },
    tabDeleta(index) {
      this.taskItemsList.splice(index, 1)
    },
    activeSelect(row) {
      console.log(row)
      row.map(v => {
        let index = this.taskItemsList.findIndex(item => item.exampleCode == v.exampleCode)
        if (index == -1) {
          this.taskItemsList.push({
            aiRuleCode: undefined,
            exampleCode: v.exampleCode,
            exampleName: v.exampleName,
            isFromAlbum: 0,
            isPushAi: 0,
            isRequire: 0,
            miniNum: 1,
            requireType: 1,
            roleCodes: v.roleCodes,
            roleNames: v.roleNames
          })
        }
      })
    },

    tabDeleta1(index) {
      this.taskItemsList1.splice(index, 1)
    },
    activeSelect1(row) {
      console.log(row)
      row.map(v => {
        let index = this.taskItemsList1.findIndex(item => item.exampleCode == v.exampleCode)
        if (index == -1) {
          this.taskItemsList1.push({
            aiRuleCode: undefined,
            exampleCode: v.exampleCode,
            exampleName: v.exampleName,
            isFromAlbum: '',
            isPushAi: '',
            isRequire: 1,
            miniNum: '',
            requireType: 2,
            roleCodes: v.roleCodes,
            roleNames: v.roleNames
          })
        }
      })
    },

    add() {
      this.edit({})
    }
    ,
    edit(record) {
      this.IsAudit = true
      this.IsPushSfa = true
      this.form.resetFields()
      this.taskItemsList = []
      this.taskItemsList1 = []
      this.questionnaireCode = '点击选择问卷'
      this.model = Object.assign({}, record)
      this.visible = true
      if (record.id) {
        this.$nextTick(() => {
          this.IsAudit = this.model.isAudit == 0 ? false : true
          this.IsPushSfa = this.model.isPushSfa == 0 ? false : true
          this.model.accountMethodCode = this.model.accountMethodCode.split(',')
          this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
          this.$set(this, 'taskItemsList', record.execRequires)
          this.$set(this, 'taskItemsList1', record.writeOffRequires)
        })
      } else {

      }
    },
    close() {
      this.confirmLoading = false
      this.visible = false
    }
    ,
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = { ...this.model, ...values }
          formData.execRequires = [...this.taskItemsList, ...this.taskItemsList1]
          formData.accountMethodCode = formData.accountMethodCode + ''
          postAction(this.url.add, formData).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.close()
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
              that.confirmLoading = false
            }
          })
        }
      })
    }
    ,
    handleCancel() {
      this.close()
    },

    handelIsPushSfa(e) {
      if (e.target.value == 0) {
        this.IsPushSfa = false
      } else {
        this.IsPushSfa = true
      }
    },

    handelIsAudit(e) {
      if (e.target.value == 0) {
        this.IsAudit = false
      } else {
        this.IsAudit = true
      }

    }
  }

}
</script>

<style lang='less' scoped>
.ant-transfer {
  width: 100%;
  display: flex !important;
  align-items: center;
}

.ant-transfer-operation {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}

.file-box {
  position: relative;
  opacity: 1;
}

.file-btn {
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
}

.tableImages {
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
}

.areaAdd {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .areaAdd-one {
    width: 40%;
    display: flex;
    flex-direction: column;
  }

  .areaAdd-mutiple {
    border: 1px solid black;
    width: 100%;
    min-height: 200px;
  }

  .contain-text {
    font-weight: 700;
    font-size: 18px;
  }
}

/deep/ .ant-modal-body {
  padding: 24px 0px;
}
</style>